<script type="text/javascript">
    $(function(){
        $("#envoyer").click(function(){
            valid = true;
            if ($("#nom").val() == "") {
                $("#nom").css("border-color","#FF0000").next(".error-message").fadeIn().text("Entrez correctement votre nom");
                valid = false;
            }else{
                 $("#nom").css("border-color","#00ff40").next(".error-message").fadeOut().text("Entrez correctement votre nom");
            }
            if (!$("#mail").val().match(/^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/)) {
                $("#mail").css("border-color","#FF0000").next(".error-message").fadeIn().text("Entrez correctement votre mail");
                valid = false;
            }else{
                 $("#mail").css("border-color","#00ff40").next(".error-message").fadeOut().text("Entrez correctement votre mail");
            }
            if (!$("#tel").val().match(/^0[1-68]([-. ]?[0-9]{2}){4}$/)) {
                $("#tel").css("border-color","#FF0000").next(".error-message").fadeIn().text("Entrez correctement votre telephone");
                valid = false;
            }else{
                 $("#tel").css("border-color","#00ff40").next(".error-message").fadeOut().text("Entrez correctement votre telephone");
            }
            return valid;
        })
    });
</script>
<h3> Contacter nous !</h3>
<hr>
<div class="container">

    <div class="row">

        <div class="col-sm-8">
            <h3>Let's Get In Touch!</h3>
            <p>Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips amets. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            <?php
            $form = $this -> form;
            $form-> prepare();
    
            echo $this-> form()->openTag($form);
            ?>
            <div class="row">
                <div class="form-group col-lg-4">
                    <?php echo $this->formRow( $form->get('nom'))."<span class='error-message'></span>";?>
                </div>
                <div class="form-group col-lg-4">
                    <?php echo $this->formRow( $form->get('mail'))."<span class='error-message'></span>"; ?>
                </div>
                <div class="form-group col-lg-4">
                    <?php echo $this->formRow( $form->get('tel'))."<span class='error-message'></span>"; ?>
                </div>
                <div class="clearfix"></div>
                <div class="form-group col-lg-12">
                    <?php echo $this->formRow( $form->get('content')); ?>
                </div>
                <div class="form-group col-lg-12">
                    <?php echo $this->formSubmit( $form->get('valider')); ?>
                </div>
                <?php echo $this-> form()->closeTag($form);?>
            </div>
        </div>

        <div class="col-sm-4">
            <h3>Modern Business</h3>
            <h4>A Start Bootstrap Template</h4>
            <p>
                5555 44th Street N.<br>
                Bootstrapville, CA 32323<br>
            </p>
            <p><i class="fa fa-phone"></i> <abbr title="Phone">P</abbr>: (555) 984-3600</p>
            <p><i class="fa fa-envelope-o"></i> <abbr title="Email">E</abbr>: <a href="mailto:feedback@startbootstrap.com">feedback@startbootstrap.com</a></p>
            <p><i class="fa fa-clock-o"></i> <abbr title="Hours">H</abbr>: Monday - Friday: 9:00 AM to 5:00 PM</p>
            <ul class="list-unstyled list-inline list-social-icons">
                <li class="tooltip-social facebook-link"><a href="#facebook-page" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook-square fa-2x"></i></a></li>
                <li class="tooltip-social linkedin-link"><a href="#linkedin-company-page" data-toggle="tooltip" data-placement="top" title="LinkedIn"><i class="fa fa-linkedin-square fa-2x"></i></a></li>
                <li class="tooltip-social twitter-link"><a href="#twitter-profile" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter-square fa-2x"></i></a></li>
                <li class="tooltip-social google-plus-link"><a href="#google-plus-page" data-toggle="tooltip" data-placement="top" title="Google+"><i class="fa fa-google-plus-square fa-2x"></i></a></li>
            </ul>
        </div>

    </div><!-- /.row -->

 </div><!-- /.container -->